import * as echarts from 'echarts';
import { is2DArray, deepClone } from '@/utils/index';

const gauge_basic = ({
  seriesData = [],
  seriesName = '',
  progressData = 50,
  maxData = 100,
  targetData = 80,
  color = ['#9381ff'],
}) => {
  // 系列配置
  let series = [];
  let seriesItemOption = {
    name: '',
    type: 'gauge',
    data: null,
    min: 0,
    max: maxData,
    splitNumber: 12,
    startAngle: 240,
    endAngle: -20,
    center: ['50%', '50%'],
    radius: '100%',
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
        { offset: 0, color: '#003cff' },
        { offset: 1, color: '#00ff9c' },
      ]),
    },
    progress: {
      show: true,
      roundCap: true,
      overlap: false,
      width: 50,
    },
    // pointer: {
    //   icon: 'path://M12.8,49.3l12,-40.1H0.7L12.8,49.3z',
    //   length: '25%',
    //   width: 30,
    //   offsetCenter: [-10.5, '-69%'],
    //   itemStyle: {
    //     color: '#0049f8',
    //   },
    // },
    axisLine: {
      show: false,
      roundCap: true,
      lineStyle: {
        width: 12,
        color: [[1, '#333']],
      },
    },
    axisTick: {
      show: false,
      splitNumber: 2,
      lineStyle: {
        width: 2,
        color: '#999',
      },
    },
    splitLine: {
      show: false,
      length: 12,
      lineStyle: {
        width: 3,
        color: '#999',
      },
    },
    axisLabel: {
      show: false,
      distance: 30,
      color: '#999',
      fontSize: 20,
    },
    title: {
      show: false,
    },
    detail: {
      show: false,
    },
  };
  // seriesData为二维数组时,设置多个series
  if (is2DArray(seriesData)) {
    seriesData.forEach((item, index) => {
      const seriesItem = deepClone(seriesItemOption);
      // 如果 seriesName 是数组 分别设置 name
      if (Array.isArray(seriesName)) seriesItem.name = seriesName[index];
      else seriesItem.name = seriesName;
      seriesItem.data = item;
      series.push(seriesItem);
    });
    // seriesData为普通数组时,设置一个series
  } else {
    const seriesItem = deepClone(seriesItemOption);
    // 设置系列data
    seriesItem.name = seriesName;
    seriesItem.data = seriesData;
    series.push(seriesItem);
  }
  const defaultConfig = {
    tooltip: {
      show: true,
      // formatter(params) {
      //   let name = params.name.split('.')[1];
      //   let content = `${name}：<span style="font-weight:bold;">${params.value.value}</span><br />`;
      //   if (showPercent)
      //     content += `占比：<span style="font-weight:bold;">${((params.value.value / total) * 100).toFixed(2)}%</span>`;
      //   return content;
      // },
    },
    grid: {
      top: '5',
      left: '5',
      right: '5',
      bottom: '5',
      containLabel: true,
    },
    series: series,
    // series: [
    //   {
    //     type: 'gauge',
    //     data: [
    //       {
    //         name: '累计',
    //         value: progressData,
    //       },
    //       {
    //         name: '当前目标',
    //         value: targetData,
    //         itemStyle: {
    //           color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
    //             { offset: 0, color: '#13e1fe' },
    //             { offset: 1, color: '#00ff6c' },
    //           ]),
    //         },
    //         pointer: {
    //           width: 8,
    //           length: '45%',
    //           offsetCenter: [0, '-65%'],
    //         },
    //       },
    //     ],
    //     min: 0,
    //     max: maxData,
    //     splitNumber: 12,
    //     startAngle: 220,
    //     endAngle: -40,
    //     center: ['50%', '50%'],
    //     radius: '100%',
    //     itemStyle: {
    //       color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
    //         { offset: 0, color: '#003cff' },
    //         { offset: 1, color: '#00ff9c' },
    //       ]),
    //     },
    //     progress: {
    //       show: true,
    //       roundCap: true,
    //       overlap: false,
    //       width: 12,
    //     },
    //     pointer: {
    //       icon: 'path://M12.8,49.3l12,-40.1H0.7L12.8,49.3z',
    //       length: '25%',
    //       width: 30,
    //       offsetCenter: [-10.5, '-69%'],
    //       itemStyle: {
    //         color: '#0049f8',
    //       },
    //     },
    //     axisLine: {
    //       show: false,
    //       roundCap: true,
    //       lineStyle: {
    //         width: 12,
    //         color: [[1, '#333']],
    //       },
    //     },
    //     axisTick: {
    //       show: false,
    //       splitNumber: 2,
    //       lineStyle: {
    //         width: 2,
    //         color: '#999',
    //       },
    //     },
    //     splitLine: {
    //       show: false,
    //       length: 12,
    //       lineStyle: {
    //         width: 3,
    //         color: '#999',
    //       },
    //     },
    //     axisLabel: {
    //       show: false,
    //       distance: 30,
    //       color: '#999',
    //       fontSize: 20,
    //     },
    //     title: {
    //       show: false,
    //     },
    //     detail: {
    //       show: false,
    //     },
    //   },
    // ],
  };

  const opt = deepClone(defaultConfig);
  return opt;
};

export default {
  gauge_basic,
};
